import { Checkbox, Divider } from 'antd';
import { CheckboxChangeEvent } from 'antd/lib/checkbox';
import { CheckboxValueType } from 'antd/lib/checkbox/Group';
import Modal from 'antd/lib/modal/Modal';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import styled from 'styled-components';
import useFilterMeta from '../libs/hooks/useFilterMeta';
import useSaLogging, { eventMap } from '../libs/hooks/useSaLogging';
import { chartAction, chartState } from '../libs/slices/chartManagerSlice';

export interface ChartEditorProps {}

// function ChartEditModal({}: ChartEditorProps) {
function ChartEditModal() {
  const { chartList, editModalVisible } = useSelector(chartState);
  const [selectedChartList, setSelectedChartList] = useState<CheckboxValueType[]>([]);
  const [indeterminate, setIndeterminate] = useState<boolean>(true);
  const [checkAll, setCheckAll] = useState<boolean>(true);
  const dispatch = useDispatch();
  const { catalog } = useFilterMeta();
  const productType = catalog;
  const { saEvent } = useSaLogging();

  const totalCharts = useMemo(() => chartList[productType].map(d => d.name), [chartList]);

  useEffect(() => {
    const selected = chartList[productType].filter(chart => chart.selected);
    setSelectedChartList(selected.map(chart => chart.name));
    setIndeterminate(!!selected.length && selected.length < totalCharts.length);
    setCheckAll(selected.length === totalCharts.length);
  }, [chartList]);

  const handleOk = useCallback(() => {
    const newSelectedList = JSON.parse(localStorage.newDashboardSelectedList);
    newSelectedList[productType] = selectedChartList;
    localStorage.newDashboardSelectedList = JSON.stringify(newSelectedList);
    dispatch(chartAction.updateChartSelection({ data: selectedChartList, productType }));
    dispatch(chartAction.toggleModalVisible());
    saEvent(
      eventMap.DASHBOARD_SELECTCARD,
      undefined,
      undefined,
      selectedChartList?.length,
    );
  }, [selectedChartList]);

  const handleCancel = useCallback(() => {
    dispatch(chartAction.toggleModalVisible());
    const notupdatedList = chartList[productType]
      .filter(chart => chart.selected)
      .map(chart => chart.name);
    setSelectedChartList(notupdatedList);
    setIndeterminate(
      !!notupdatedList.length && notupdatedList.length < totalCharts.length,
    );
    setCheckAll(notupdatedList.length === totalCharts.length);
  }, [chartList, totalCharts]);

  const onChange = useCallback(
    (list: CheckboxValueType[]) => {
      setSelectedChartList(list);
      setIndeterminate(!!list.length && list.length < totalCharts.length);
      setCheckAll(list.length === totalCharts.length);
    },
    [totalCharts],
  );

  const onCheckAllChange = useCallback(
    (e: CheckboxChangeEvent) => {
      setSelectedChartList(e.target.checked ? totalCharts : []);
      setIndeterminate(false);
      setCheckAll(e.target.checked);
    },
    [totalCharts],
  );

  return (
    <Modal
      title="Dashboard Card List"
      visible={editModalVisible}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <Checkbox
        indeterminate={indeterminate}
        onChange={onCheckAllChange}
        checked={checkAll}
      >
        Select All
      </Checkbox>
      <Divider />
      <CustomCheckboxGroup
        options={totalCharts}
        value={selectedChartList}
        onChange={onChange}
      />
    </Modal>
  );
}

const CustomCheckboxGroup = styled(Checkbox.Group)`
  .ant-checkbox-wrapper {
    width: 100%;
    margin-bottom: 5px;
  }
`;

export default ChartEditModal;
